<script setup lang="ts">
import { ref } from 'vue'
import DoctorList from './DoctorList.vue'
</script>

<template>
  <div class="doctor-selection">
    <!-- 轮播图区域 -->
    <div class="carousel-section">
      <h3>轮播图</h3>
      <el-carousel height="200px">
        <el-carousel-item v-for="item in 4" :key="item">
          <div class="carousel-content">轮播内容 {{ item }}</div>
        </el-carousel-item>
      </el-carousel>
    </div>

    <!-- 医生列表 - 使用新组件 -->
    <DoctorList />
  </div>
</template>

<style scoped>
.doctor-selection {
  padding: 20px;
}

.carousel-section {
  margin-bottom: 30px;
}

.carousel-content {
  height: 100%;
  background-color: #f0f2f5;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
}
</style>
